MarginVertical = 1.6em

// 文章内容样式
.article-entry
  color: #555

  &:before, &:after
    content: ""
    display: table

  &:after
    clear: both
  
  p, table
    line-height: MarginVertical
    margin: MarginVertical 0
  
  table
    width: 100%
    border-collapse: collapse
    border-spacing: 0

  th
    font-weight: bold
    border-bottom: 3px solid #ddd
    padding-bottom: 0.5em

  td
    border-bottom: 1px solid #ddd
    padding: 10px 0

  del
    color: #999999
    
  h1, h2, h3, h4, h5, h6
    font-weight: bold
    line-height: 1.1em
    margin: 1.1em 0
  
  a
    color: #f857a6
    text-decoration: none
    word-break: break-all
    border-bottom: 2px solid #dde0e0
    transition: border 0.3s ease;
    
    &:hover
      border-color: #ff5858
  
  ul, ol, dl
    margin-top: MarginVertical
    margin-bottom: MarginVertical

  ul, ol
    padding-left: 2em
    line-height: 1.6

  ul
    list-style-type: disc
  
  ol
    list-style-type: decimal
  
  img, video
    max-width: 100%
    height: auto
    display: block
    margin: auto
  
  iframe
    border: none
    
  blockquote
    font-family: Georgia, "Times New Roman", serif
    font-size: 1em
    padding-left: 1rem
    border-left: 3px solid #d3d3d3
    color: #646464

  blockquote footer
    font-size: 14px
    margin: MarginVertical 0
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

  blockquote footer cite:before
    content: "—"
    padding: 0 0.5em

  .pullquote
    text-align: left
    width: 45%
    margin: 0

  .pullquote.left
    margin-left: 0.5em
    margin-right: 1em

  .pullquote.right
    margin-right: 0.5em
    margin-left: 1em

  .caption
    color: #999
    display: block
    font-size: 0.9em
    margin-top: 0.5em
    position: relative
    text-align: center

  .video-container
    position: relative
    padding-top: 56.25%
    height: 0
    overflow: hidden

  .video-container iframe, .video-container object, .video-container embed
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    margin-top: 0

  pre, .highlight
    margin: MarginVertical 0
    background: #2d2d2d
    padding: 15px 20px
    border-style: solid
    border-color: #ddd
    border-width: 1px 0
    overflow: auto
    color: #ccc

  .highlight .gutter pre, .gist .gist-file .gist-data .line-numbers
    color: #666
    font-size: 0.85em

  pre, code
    font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace

  code
    background: #eee
    text-shadow: 0 1px #fff
    padding: 0 0.3em

  pre code
    background: none
    text-shadow: none
    padding: 0

  .highlight pre
    border: none
    margin: 0
    padding: 0

  .highlight table
    margin: 0
    width: auto

  .highlight td
    border: none
    padding: 0

  .highlight figcaption
    font-size: 0.85em
    color: #999
    line-height: 1em
    margin-bottom: 1em

  .highlight figcaption:before, .highlight figcaption:after
    content: ""
    display: table

  .highlight figcaption:after
    clear: both

  .highlight figcaption a
    float: right

  .highlight .gutter pre
    text-align: right
    padding-right: 20px

  .highlight .line
    height: 22.400000000000002px

  .highlight .line.marked
    background: #515151

  .gist
    margin: 0 -20px
    border-style: solid
    border-color: #ddd
    border-width: 1px 0
    background: #2d2d2d
    padding: 15px 20px 15px 0

  .gist .gist-file
    border: none
    font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
    margin: 0

  .gist .gist-file .gist-data
    background: none
    border: none

  .gist .gist-file .gist-data .line-numbers
    background: none
    border: none
    padding: 0 20px 0 0

  .gist .gist-file .gist-data .line-data
    padding: 0 !important

  .gist .gist-file .highlight
    margin: 0
    padding: 0
    border: none

  .gist .gist-file .gist-meta
    background: #2d2d2d
    color: #999
    font: 0.85em -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
    text-shadow: 0 0
    padding: 0
    margin-top: 1em
    margin-left: 20px

  .gist .gist-file .gist-meta a
    color: #258fb8
    font-weight: normal

  .gist .gist-file .gist-meta a:hover
    text-decoration: underline

  // flex center
  .flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  // aplayer 样式
  .aplayer {
    margin: MarginVertical 0
  }
  
  // dplayer 样式
  .dplayer {
    width: 100%
    margin: MarginVertical 0
    border-radius: 4px
    overflow: hidden
    box-shadow: 0 2px 10px rgba(#000000, 0.5)
    transition: all 0.3s ease

    &:hover {
      box-shadow: 0 4px 16px rgba(#000000, 0.5)
    }
  }

  // 自定义插入图片
  .figure-image {
    margin: MarginVertical 0;

    img {
      display: block
      max-width: 100%
    }

    figcaption {
      padding: 0 1rem
      margin-top: 0.8rem
      line-height: 1.5
      text-align: center
      color: #999999
    }
  }

  // 自定义插入书签
  .bookmark-card {
    transition: all 0.3s ease
    border-radius: 10px
    overflow: hidden
    margin: MarginVertical 0;

    &:hover {
      transform: translateY(-3%)
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2)
    }

    .bookmark-container {
      display: flex
      border: none
      color: #161b3d
      background-color: #f7f7f7

      .bookmark-content {
        flex: 1
        padding: 20px

        .bookmark-name {
          font-size: 20px
          font-weight: bolder
          margin-bottom: 15px
        }
        
        .bookmark-link {
          font-size: 14px
        }
      }

      .bookmark-cover {
        position: relative
        min-width: 25%
        max-height: 100%

        img {
          display: block
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          object-fit: cover
        }
      }
    }
  }

  // 自定义插入画廊
  .waterfall-container {
    margin: MarginVertical 0;

    p {
      display: block
      border-radius: 4px
      overflow: hidden
      margin: 0
    }
  }

// 在.max中，由于不可抗拒原因，在1200px左右的时候跟父容器宽度不一样，为最大值
// 以下两个流媒体查询在1200px左右会不精确，原因是如 1250的92vw 已经小于了1200px
// 但是媒体查询匹配的是 desktop 桌面(>= 1200) 所以会不精确

// desktop 桌面(>= 1200)
@media screen and (min-width: desktop-max-content-width) {

  .figure-image.max {
    margin-left: -((1200px - inner-width + inner-padding * 2) / 2)
    margin-right: -((1200px - inner-width + inner-padding * 2) / 2)
  }

  // 自定义插入画廊
  .waterfall-container.max {
    margin-left: -((1200px - inner-width + inner-padding * 2) / 2)
    margin-right: -((1200px - inner-width + inner-padding * 2) / 2)
  }
}

// desktop 桌面(>=768 && < 1200 + 20)
@media screen and (min-width: 768px) and (max-width: desktop-max-content-width) {

  .figure-image.max {
    margin-left: 'calc((92vw - 100%) / 2 * -1)' % (inner-padding)
    margin-right: 'calc((92vw - 100%) / 2 * -1)' % (inner-padding)
  }

  // 自定义插入画廊
  .waterfall-container.max {
    margin-left: 'calc((92vw - 100%) / 2 * -1)' % (inner-padding)
    margin-right: 'calc((92vw - 100%) / 2 * -1)' % (inner-padding)
  }
}

// mobile 移动设备(768<)
@media screen and (max-width: 767px) {
  .article-entry {
    h1, h2, h3, h4, h5, h6 {
      line-height: 1
      margin: 1em 0
    }

    pre, .highlight {
      padding: 7px 10px
      line-height: 1.3
    }

    .highlight .gutter pre {
      padding-right: 10px
    }
  }
}